<template>
	<view class="content">
		<Search></Search>
		<Preference :preferdata="preferdata"></Preference>
		<Title></Title>
		<!--:catchtouchmove="true" 事件穿透  -->
		<view @click="poll()" :catchtouchmove="true">
			<Delicacy :class="{'is_fixed':isfixed}" id="boxFixed"></Delicacy>
		</view>
		<view class="" style="height: 50upx;">
			
		</view>
		<Takeout :takeshop="takeshop"></Takeout>
		
		
	</view>
</template>

<script>
	//引进子组件
	
	import Search from "./components/search.vue"
	import Preference from "./components/preference.vue"
	import Title from "./components/title.vue"
	import Delicacy from "./components/delicacy.vue"
	import Takeout from "./components/takeout.vue"
	// 引用接口
	import {listing} from "../../api/api.js"
	// 引入请求地址
	import {getpreferurl,wxshopurl} from "../../api/request.js"
	// 引入vuex的mapstate
	import {mapState} from "vuex"
	export default {
		components:{
			Search,
			Preference,
			Title,
			Delicacy,
			Takeout,
		},
		data() {
			return {
				title: 'Hello',
				rect:"",
				isfixed:false,
				topdata:"",
				// 为你优选
				preferdata:[],
				// 商家列表
				takeshop:[],
			}
		},
		
		methods: {
		// 为你优选
		preference(){
			// 批量并发请求多个接口，promise.all=>可以并发多个接口
			// 并且同时得到多个接口的数据
			Promise.all	([listing(getpreferurl),listing(wxshopurl)])
			// listing(getpreferurl)
			.then((res)=>{
				// console.log(res)
				// 为你优选
				this.preferdata = res[0].data
				// 商家列表
				this.takeshop = res[1].data
				
			})
			.catch((err)=>{
				console.log(err)
			})
			},
			// 附近商家
			
		// 回到顶部
		poll(){
			wx.pageScrollTo({
				scrollTop:this.topdata+2,
				duration:300
			})
		}
		},
		onLoad(){
			// 监听筛选组件距离顶部的距离
			const query =wx.createSelectorQuery()
			query.select("#boxFixed").boundingClientRect()
			// query.selectViewport().scrollOffset() 
			query.exec((res)=>{
				console.log(res[0].top)
				this.menutop= res[0].top
				this.topdata =res[0].top
			})
		},
		// 监听页面滚动距离
		onPageScroll(e){
				// console.log(e.scrollTop)
				this.rect = e.scrollTop
		},
		
		mounted(){
			this.preference()
		},
		//计算属性
		computed:{
			...mapState(["screendata"]),
			// 监听筛选组件顶置和不顶置
			namepage(){
				// console.log("我是自动执行的")
				// 如果页面滚动的高度大于筛选组件距离顶部的高度,那就顶置
				// 反着不顶置
				if(this.rect>this.menutop){
					// console.log("置顶")
					this.isfixed=true
				}else{
					// console.log("不置顶")
					this.isfixed=false
				}
			},
			// 筛选来的商家数据
			count(){
				this.takeshop = this.screendata.screenarr
				// console.log(this.takeshop)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		/* justify-content: center; */
		margin: 0 15upx;
		height: 3000upx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.is_fixed{
		position: fixed;
		left:0;
		top: 0;
		right: 0;
	}
</style>
